<template>
  <div>
      <div class="bg">
          <div>
              <li>
                  <img :src="img" alt="">
                  <ul>
                  <p>为您带去一个无螨的居家环境</p>
              <p>{{nickname}}<span>{{count==0?"你还未预约清洁服务":"你预约了"+count+"条清洁服务"}}</span></p>
              </ul>
              </li>
          </div>
          
      </div>
      
      <div class="info">
          <div class="info-xinxi">
              
              <div class="info-one">
                  <router-link to="order">
                  <div class="one-img"><img src="../assets/tu_1.png" alt=""></div>
                    <div class="one-txt">我的预约</div>
                    <div class="one-fh">></div>
                     </router-link>
              </div>
             
              <div class="info-one">
                  <router-link to="myinfo">
                  <div class="one-img"><img src="../assets/tu_2.png" alt=""></div>
                    <div class="one-txt">个人信息</div>
                    <div class="one-fh">></div>
                    </router-link>
              </div>
              <div class="info-one">
                  <router-link to="finish">
                  <div class="one-img"><img src="../assets/tu_3.png" alt=""></div>
                    <div class="one-txt">完成订单</div>
                    <div class="one-fh">></div>
                  </router-link>
              </div>
          </div>
          <div class="space"></div>
          <div class="info-xinxi">
              
              <div class="info-one">
                  <router-link to="aboutme">
                  <div class="one-img"><img src="../assets/tu_4.png" alt=""></div>
                    <div class="one-txt">关于我们{{name}}</div>
                    <div class="one-fh">></div>
                  </router-link>
              </div>
              <!-- <div class="info-one">
                  <router-link to="advice">
                  <div class="one-img"><img src="../assets/tu_5.png" alt=""></div>
                    <div class="one-txt">反馈建议</div>
                    <div class="one-fh">></div>
                  </router-link>
              </div> -->
          </div>
      </div>
      <div class="button">
          <button @click="logout">退出登录</button>
      </div>
    <tabbar></tabbar>
     
  </div>
</template>

<script>
import tabbar from "../components/tabbar"
import api from "../axios/api.js";
export default {
    data(){
        return{
            ID:"",
            nickname:"",
            count:"",
            img:null,
            wx:null,
        }
    },
components:{
    tabbar
},
mounted(){
        let ID = localStorage.getItem("ID")
        this.ID = ID
      
        console.log()
        if(localStorage.getItem("id")){
            this.ID = localStorage.getItem("id")
         }
        this.getinfo()
        
        
},
methods:{
    logout(){
        
        /*删除信息*/
        localStorage.removeItem("phone")
        localStorage.removeItem("ID")
        localStorage.removeItem("id")
        window.location.href = "http://qt.jht018.com"
    },
    getinfo(){
        
        this.$post(api.getIduser,{id:this.ID}).then(
              res => {
            if (res.code == 200) {
                // this.$toast.success(res.msg);
                this.myorder = res.data
                this.nickname = res.nickname
                this.count = res.count
                this.img  = res.head_img
            if(localStorage.getItem("id")){
              
            this.nickname = localStorage.getItem("nickname")
            this.img = localStorage.getItem("headimgurl")
         }
                  }else{
              this.$toast.fail(res.msg);
            }
          });
    }
  }
}
</script>

<style lang="less" scoped>
.topnav {
    background-color: #1b388c;
    height: 50px;
    color: #fff;
    text-align: center;
    line-height: 50px;
    p{
        margin: 0;
    }
}
.van-nav-bar {
    background-color: #1b388c;
    .van-nav-bar__title{
        color: #fff;
    }
}
.space {
    height: 10px;
    background-color: #f6f6f6;
}
.bg{
    width: 100%;
    height: 200px;
    background: url("../assets/bg.png") no-repeat;
    background-size: 100%;
    div {
        padding-top: 120px;
        margin-left: 60px;
        li{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            ul {
                p{
                    margin: 0;
                    
                }
            }
            img{
                width: 70px;
                height: 70px;
                border-radius: 50%;
                background-size: 100%;   
            }
            p {
                color: #43c4ec;
                font-size: 15px;
                margin-left: -10px!important;
                span{
                    color: #000;
                    margin-top: 5px;
                    margin-left: 10px;
                    display: block;
                    font-size: 12px;
                }
            }
        }
    }
    img{
        width:20px;
        height: 20px;
        float: right;
        margin-right: 10px;
        margin-top: 10px;
    }
    .header-touxiang{
    width: 71px;
    height: 71px;
    border: 2px solid white;
    border-radius: 50%;
    position: absolute;
    top: 20%;
    left: 40%;
    
    }
    .header-name{
        width: 140px;
        height: 100px;
        position: absolute;
        text-align: center;
        top: 57%;
        left: 32%;

        .name{
            font-size: 16px;
            color: white;
        }

        img{
            width: 20px;
            height: 20px;
            float: left;
        }
        .number{
            font-size: 15px;
            color: white;
            margin-top: 13px;
            margin-right: 10px;
            float: left;
        }
    }

}
.middle{
    width: 100%;
    height: 96px;
    margin-top: 7px;
    background-color: white;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    

    .middle-icon{
        float: left;
        text-align: center;
        margin-left: 33px;
        margin-top: 26px;
        img{
            width: 25px;
            height: 31px;
        }

        p{
            font-size: 13px;
        }
    }
}
.info{
    width: 100%;
    height: 190px;
    background-color: white;
    margin-top: 7px;

    .info-xinxi{
        width: 353px;
        height: 155px;
        margin: 0 auto;

        .info-one{
            width: 100%;
            height: 50px;
            border-bottom: 1px solid #f6f6f6;

            .one-img{
                margin-left: 15px;
                margin-top: 15px;
                float: left;

                img{
                width: 18px;
                height: 18px;
                }
            }

            .one-txt{
                float: left;
                margin-left: 15px;
                margin-top: 15px;
                font-size: 15px;
                
            }

            .one-fh{
                float: right;
                width: 10px;
                height: 15px;
                background-size: 100%;
                margin-right: 15px;
                margin-top: 10px;
                font-size: 20px;
                color: #e0dede;
            }
        }
    }

    
}
.button{
    width: 100%;
    text-align: center;
    margin-top: 100px;
    margin-bottom: 300px;
    height: 100px;

    button{
        width: 143px;
        height: 35px;
        background-image: linear-gradient(#04c2f3,#0295d2);
        margin-top: 20px;
        border: 0;
        border-radius: 35px;
        color: white;
        
    }
}
</style>